<template>
    <div>
        <p style="color:var(--themeColor)" class="tabs-top-title">{{$t('Service-status')}}</p>
        <a-table class='tabstyle2' rowKey="id" :columns='sercolumns' :loading="loading" :dataSource='serdata' 
                 size='small' :pagination='pagination' :locale="defaultSetting">
            <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class='custom-filter-dropdown'>
                <a-input v-ant-ref="c => searchInput = c" :placeholder="`Search ${column.dataIndex}`" :value="selectedKeys[0]" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm)" style="width: 188px; margin-bottom: 8px; display: block;" />
                <a-button type='primary' @click="() => handleSearch(selectedKeys, confirm)" icon="search" size="small" style="width: 90px; margin-right: 8px">Search</a-button>
                <a-button @click="() => handleReset(clearFilters)" size="small" style="width: 90px">Reset</a-button>
            </div>
            <a-icon slot="filterIcon" slot-scope="filtered" type='search' :style="{ color: filtered ? '#108ee9' : undefined }" />
            <template slot="customRender" slot-scope="text">
                <span v-if='searchText'>
                    <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
                        <mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" :key="i" class="highlight">{{fragment}}</mark>
                        <template v-else>{{fragment}}</template>
                    </template>
                </span>
                <template v-else>{{text}}</template>
            </template>
        </a-table>
        <!-- <Areaview></Areaview> -->
    </div>
</template>
<script>
import Areaview from './area'
import EmptyData from '@/components/common/EmptyData'
import request from '@/request/request'

export default {
    name:'service',
    components:{Areaview, EmptyData},
    data(){
        return{
            sercolumns:[
                {title:'ID',dataIndex:'id',key:'id'},
                {title: this.$t('Host')+this.$t('Name'),dataIndex:'hostname',key:'hostname',
                sorter:(a,b)=>a.hostname.length - b.hostname.length,
                scopedSlots: {
                    filterDropdown: 'filterDropdown',
                    filterIcon: 'filterIcon',
                    customRender: 'customRender',
                },
                onFilter: (value, record) => record.hostname.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus()
                        }, 0)
                    }
                }
                },
                {title: this.$t('Port'),dataIndex:'port',key:'port' },
                {title: this.$t('Type'),dataIndex:'type',key:'type'}
            ],
            searchText: '',
            searchInput: null,

            pagination:{
                defaultPageSize:5,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger:true,
                pageSizeOptions: ['5', '10', '15', '20'],
                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            serdata:[],
            loading:true,
            defaultSetting: {emptyText:<EmptyData />}
        }
    },
    computed:{
        getlanguage(){
            return this.$store.state.language
        }
    },
    watch:{
        getlanguage(val){
            this.sercolumns=[
                {title:'ID',dataIndex:'id',key:'id'},
                {title: this.$t('Host')+this.$t('Name'),dataIndex:'hostname',key:'hostname',
                sorter:(a,b)=>a.hostname.length - b.hostname.length,
                scopedSlots: {
                    filterDropdown: 'filterDropdown',
                    filterIcon: 'filterIcon',
                    customRender: 'customRender',
                },
                onFilter: (value, record) => record.hostname.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus()
                        }, 0)
                    }
                }
                },
                {title: this.$t('Port'),dataIndex:'port',key:'port' },
                {title: this.$t('Type'),dataIndex:'type',key:'type'}
            ]
        }
    },
    mounted(){
        this.getdata()
    },
    methods:{
        getdata(){
            this.loading = true
            request('get', 'rgw/status').then(res=>{
                if(res.data.flag == 1) {
					this.model(res.data.id) //返回模板
					this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
				}else {
                    this.serdata = res.data;
                    this.loading = false;
                }
            }).catch(err => {
                this.loading = false;
            })
        },
        handleSearch(selectedKeys, confirm) {
            confirm()
            this.searchText = selectedKeys[0]
        },

        handleReset(clearFilters) {
            clearFilters()
            this.searchText = ''
        },
    }
}
</script>
<style scoped>
 .tabstyle2 {
    height: 30em;
 }
</style>
